<template>
	<view>
		<!-- 轮播图 -->
		 <!-- style="height: 400upx;" -->
		<swiper indicator-dots='true' indicator-color='#ececec' indicator-active-color='#D0007F' autoplay circular style="height: 750upx;">
			<swiper-item v-for="(item,index) in productDetail.images" :key='index'>
				<image :src="item.url" style="width: 100%;height: 750upx;"></image>
			</swiper-item>
		</swiper>

		<!-- 商品信息 -->
		<view style="padding: 20upx;background-color: #FFFFFF;display: flex;justify-content: space-between;align-items: center;">
			<view>
				<p class='productName'>{{productDetail.name}}</p>
				<span style='color: #D7000F;font-size: 20upx;margin-right: 30upx;'>¥<span style='font-size: 36upx;'>{{productDetail.price}}</span></span>
				<span style='font-size: 24upx;'>原价：¥<del>{{productDetail.mktprice}}</del></span>
			</view>
			<view style="width:110upx;text-align: center;" @click="collection(id)">
				<uni-icon type="star" size="50" :class="isCollect? 'on':''"></uni-icon>
				<p style='font-size: 20upx;'>{{isCollect?'已收藏':'收藏'}}</p>
			</view>
		</view>

		<!-- 规格、地址、参数 -->
		<view style="margin: 6px 0;">
			<view class="property" style="" @click='toshow()'>
				<span>请选择商品属性</span>
				<span>
					<uni-icon type="arrowright" size="40"></uni-icon>
				</span>
			</view>
			<!-- <view class="property" @click="checkAdd()">
				<span>配送至：</span>
				<span>
					<uni-icon type="arrowright" size="40"></uni-icon>
				</span>
			</view> -->
			<view class="property" style="" @click='paramsList()'>
				<span>商品参数</span>
				<span>
					<uni-icon type="arrowright" size="40"></uni-icon>
				</span>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="detail" ref='intro'>
			<rich-text :nodes="productDetail.intro"></rich-text>
		</view>

		<view v-show='show' style="position: fixed;z-index:100;bottom: 0;width:100%">
			<button style="width: 100%;border-radius: 0;background-color: #D7000F;color: #FFFFFF;" @click="toshow">立即购买</button>
		</view>

		<!-- 规格弹窗 -->
		<lvv-popup position="bottom" ref="select" @show='showBtn'>
			<view class="container">
				<view class="title">
					<view style="display: flex;">
						<image :src="imgUrl" style="width: 150upx;height: 150upx;"></image>
						<view style="margin-left: 20upx;font-size: 24upx;line-height: 50upx;">
							<p>¥<text style="font-size: 40upx;color: #D7000F;">{{productDetail.price}}</text></p>
							<p style="color: #999;">¥{{productDetail.mktprice}}</p>
							<!-- <p>库存:{{productDetail.goods_number}}{{productDetail.goods_unit}}</p> -->
						</view>
					</view>
					<span>
						<uni-icon type="close" size="40" @click='toclose()'></uni-icon>
					</span>
				</view>
				<view class='content'>
					<specifications ref='spesDesc' :list='specifications' :goodsId='id' @info='getInfo'></specifications>
					<view style="display: flex;justify-content: space-between;">
						<span>购买数量</span>
						<uni-number-box v-model='goodsNum' @change='handleChange($event)'></uni-number-box>
					</view>
				</view>
				<view style="display:flex;">
					<button style="width: 50%;" @click="addCart()">加入购物车</button>
					<button style="width: 50%;border-radius: 0;background-color: #D7000F;color: #FFFFFF;" @click="confirmOrder()">立即购买</button>
				</view>
			</view>
		</lvv-popup>

		<!-- 地址弹窗 -->
		<lvv-popup position="bottom" ref="address" @show='showBtn'>
			<view class="container">
				<view>vsdfvsafvefvsdf</view>
			</view>
		</lvv-popup>

		<!-- 参数弹窗 -->
		<lvv-popup position="bottom" ref="params" @show='showBtn'>
			<view class="container">
				<view class="title">
					<span>商品参数</span>
					<uni-icon type="close" size="24" @click='toclose()'></uni-icon>
				</view>
				<view class='content'>
					<view style="border-bottom: #E6E6E6 1px solid;line-height: 60upx;" v-for='(item,index) in params' :key='index'>
						<span style='color: #666;margin-right: 30upx;'>{{item.name}}</span>
						<span v-for='(val,index) in item.value' :key='index'>{{val}}</span>
					</view>
				</view>
				<button style="background: #D7000F;color: #FFFFFF;" @click="toclose()">完成</button>
			</view>
		</lvv-popup>
	</view>
</template>
<script>
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default {
		data() {
			return {
				userId: uni.getStorageSync('userId'),
				id: '',
				width: '',
				productDetail: {},
				specifications: {},
				spesDesc: '',
				params: {},
				productId: '',
				isCollect: false,
				goodsNum: 1,
				imgUrl: '',
				show: true
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			// 显示规格弹出框
			toshow() {
				this.$refs.select.show();
				this.$refs.spesDesc.getSpesDesc()
			},
			// 关闭弹出框
			toclose() {
				this.$refs.select.close();
				this.$refs.address.close();
				this.$refs.params.close();
			},
			showBtn(e){
				this.show = e
			},
			// 获取商品详情
			getDetail() {
				this.specifications = []
				const token = uni.getStorageSync('token');
				if(token){
					this.isCollec()
				}
				let params = {
					goodsId: this.id
				}
				get('mobileapi/anon/goods/getGoodsDetailById', params, token).then(res => {
					this.productDetail = res.goodsById
					let result = res.goodsById.intro
					const regex = new RegExp('<img', 'gi');
					result = result.replace(regex, `<img style="max-width: 100%;margin:-4px;"`);
					this.productDetail.intro = result
					this.imgUrl = this.productDetail.masterImg.url
					this.params = JSON.parse(res.goodsById.params)
					let defaultSpec = ''
					if (res.goodsById.productsEntities) {
						// 取出默认产品
						for (let i = 0; i < res.goodsById.productsEntities.length; i++) {
							let product = res.goodsById.productsEntities[i]
							if (product.isDefalut === 1) {
								if (product.spesDesc) {
									defaultSpec = product.spesDesc
								}
								this.productId = product.id
							}
						}
					}
					let defaultSpecList = []
					if (defaultSpec) {
						defaultSpecList = defaultSpec.split(';')
					}
					if (res.goodsById.spesDesc) {
						let data = JSON.parse(res.goodsById.spesDesc)
						for (let i = 0; i < data.length; i++) {
							const option = {
								name: data[i].name,
								value: data[i].value,
								checked: defaultSpecList[i].split(':')[1]
							}
							this.specifications.push(option)
						}
					}
				})
			},

			// 加入购物车
			addCart() {
				let params = {
					userId: this.userId,
					productId: this.productId,
					num: this.goodsNum
				}
				post('mobileapi/cart/addCart', params).then(res => {
					uni.showToast({
						title: '已加入购物车',
						icon: 'success'
					})
				})
			},
			// 不同的规格使用不同的价格
			getInfo(op) {
				this.productId = op.productId,
					this.productDetail.mktprice = op.mktprice,
					this.productDetail.price = op.price
			},
			// 选择收货地址
			checkAdd() {
				this.$refs.address.show();
			},
			// 查询是否收藏
			isCollec() {
				let params = {
					goodsId: this.id,
					userId: this.userId
				}
				get('mobileapi/collect/isCollecGoods', params).then(res => {
					this.isCollect = res.isCollect
				})
			},
			// 收藏
			collection(id) {
				let params = {
					'goodsId': id,
					'userId': this.userId
				}
				if (this.isCollect === true) {
					get('mobileapi/collect/unCollectGoods', params).then(res => {
						uni.showToast({
							title: '已添加收藏',
							icon: 'success',
							duration: 5000
						})
						this.isCollec()
					})
				} else {
					get('mobileapi/collect/collectGoods', params).then(res => {
						uni.showToast({
							title: '已取消收藏',
							duration: 5000
						})
						this.isCollec()
					})
				}
			},
			// 打开商品参数
			paramsList() {
				this.$refs.params.show();
			},
			// 确认订单
			confirmOrder() {
				uni.navigateTo({
					url: '/pages/confirmOrder/index?productId=' + this.productId + '&num=' + this.goodsNum
				})
			},
			handleChange(val) {
				this.goodsNum = val
			},
		}
	}
</script>
<style>
	.productName {
		font-size: 30upx;
	}

	.property {
		height: 60upx;
		line-height: 60upx;
		font-size: 30upx;
		display: flex;
		justify-content: space-between;
		padding: 20upx;
		background-color: #FFFFFF;
		margin-top: 2px;
	}

	button {
		font-size: 30upx;
		height: 80upx;
		line-height: 80upx;
	}

	.on {
		color: #D7000F;
	}

	.container {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		position: absolute;
		bottom: 0;
	}

	.title {
		border-bottom: 1px solid #f0f0f0;
		padding: 20upx;
		display: flex;
		justify-content: space-between;
		font-size: 30upx;
	}

	.content {
		font-size: 28upx;
	}

	uni-button:after{
		border: 0;
		border-radius: 0;
	}
	
	.detail{
		text-align: center;
		margin-bottom: 100upx;
	}
	
	.detail image{
		margin: -10px!important;
	}
</style>
